<template>
	<view class="attent-page">
		<!--标题栏-->
		<bar-title bgColor='bg-white' :isSolid="false" >
			<block slot="content">关注</block>
		</bar-title>
		
		<!-- 导航 -->
		<view class="navbar-box">
			<view class="navbar">
				<view 
					v-for="(item, index) in navList" :key="index" 
					class="nav-item" 
					:class="{current: tabCurrentIndex === index}"
					@click="tabClick(index)"
				>
					{{item.text}}
				</view>
			</view>
		</view>
		
		
		<swiper :current="tabCurrentIndex" 
			class="swiper-box" 
			:style="[
				{height:'calc(100vh - '+ navigationBarHeight + 'px - 146rpx)'},
				{top: navigationBarHeight + 'px'}
			]"
			duration="300" 
			@change="changeTab"
		>
			<swiper-item class="tab-content" v-for="(tabItem,tabIndex) in navList" :key="tabIndex">
				<scroll-view 
					class="list-scroll-content" 
					scroll-y
					@scrolltolower="loadData"
				>
					<empty v-if="tabItem.loaded === true && tabItem.focusList.length === 0"></empty>
					
					<!-- 列表 -->
					<view class="fans-list cu-list menu-avatar">
						<block v-for="(fans, index) in tabItem.focusList" :key="index">
							<view class="cu-item"  @click="jumpUsers(fans)">
								<view class="cu-avatar round lg"
									:style="[{ backgroundImage:'url(' + fans.headurl + ')' }]"
								></view>
								<view class="content">
									<view class="text-black">
										<view class="text-cut">{{ fans.nickname }}</view>
									</view>
									<view class="text-gray text-sm flex">
										<view class="text-cut">{{ fans.autograph }}</view>
									</view>
								</view>
								<view class=" fans-btn">
									
									<button class="cu-btn block round line-cyan "
										v-if="fans.attenttype == 'W'"
										@click.stop="addFans(fans)"
									>
										<text>+ 关注</text>				
									</button>
									<button class="cu-btn block round line-grey"
										v-else
										@click.stop="delFans(fans)"
									>
										<text>相互关注</text>				
									</button>
								</view>
							</view>
						</block>
					</view>
					 
					<uni-load-more :status="tabItem.loadingType"></uni-load-more>
					
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template> 

<script>
import uniLoadMore from '@/components/basics/uni-load-more/uni-load-more.vue';
import empty from "@/components/basics/empty.vue";
import ViewCoupon from "@/components/box/ViewCoupon.vue";
import { User } from '@/models/user.js';
let user = new User()
	export default {
		components: {
			uniLoadMore,
			empty,
			ViewCoupon
		},
		data() {
			return {
				tabCurrentIndex: 0,
				clickFans: true,
				navList: [{
						usertype: 'U',
						text: '谜友',
						loaded: false,
						loadingType: 'more',
						pagenum: 0,
						focusList: []
					},
					{
						usertype: 'B',
						text: '剧本店',
						loaded: false,
						loadingType: 'more',
						pagenum: 0,
						focusList: []
					},
					{
						usertype: 'P',
						text: '剧本发行商',
						loaded: false,
						loadingType: 'more',
						pagenum: 0,
						focusList: []
					},
				],
			};
		},
		computed: {
			statusBarHeight(){
				return this.systemInfo.statusBarHeight
			},
			navigationBarHeight(){
				return this.systemInfo.navigationBarHeight;
			},
			customWidth(){
				return this.systemInfo.custom.width;
			},
			customHeight(){
				return this.systemInfo.custom.height;
			},
			//小程序右侧需要留出气泡空间
			headerPaddingRight(){
				// #ifndef MP
				return 0;
				// #endif
				// #ifdef MP-WEIXIN
				return this.customWidth + 20;
				// #endif
			},
		},
		
		onLoad(options){
			this.tabCurrentIndex = options.state || 0;
			this.loadData()
		},
		methods: {
			jumpUsers(fans){
				let index = this.tabCurrentIndex -0;
				switch(index) {
					case 0: 
						this.$jumpPages('playinfo', { 
							othername: fans.username ,
						})
					break;
				}	
				
			},
			//获取订单列表
			loadData(source){
				//这里是将订单挂载到tab列表下
				let index = this.tabCurrentIndex;
				let navItem = this.navList[index];
				let state = navItem.state;
				
				if(source === 'tabChange' && navItem.loaded === true){
					//tab切换只有第一次需要加载数据
					return;
				}
				if(navItem.loadingType === 'loading'){
					//防止重复加载
					return;
				}
				
				navItem.loadingType = 'loading';
				navItem.pagenum = navItem.pagenum + 1;
				
				this.myFocusList(navItem)
			}, 

			//swiper 切换
			changeTab(e){
				this.tabCurrentIndex = e.target.current;
				this.loadData('tabChange');
			},
			//顶部tab点击
			tabClick(index){
				this.tabCurrentIndex = index;
			},
			async myFocusList(navItem) {
				let focusList =  await this.$apis.myFocusList({
					othername: user.username,
					pagenum: navItem.pagenum,
					usertype: navItem.usertype,
				})
				navItem.loaded = true
				navItem.focusList = navItem.focusList.concat(focusList)
				if (!focusList.length<20) {
					navItem.loadingType = 'noMore'
					return
				}
				navItem.loadingType = 'more'
			},
			async addFans(fans) {
				this.clickFans = false
				this.$apis.addFans({othername: fans.username}).then(res => {
					fans.attenttype = 'M'
					this.$mTool.showToast({
						title: '关注成功',
						icon: 'none'
					})
					this.clickFans = true
				}).catch(err => {
					this.clickFans = true
				})
			},
			async delFans(fans) {
				this.clickFans = false
				this.$apis.delFans({othername: fans.username}).then(res => {
					console.log(res);
					fans.attenttype = 'W'
					this.$mTool.showToast({
						title: '取关成功',
						icon: 'none'
					})
					this.clickFans = true
				}).catch(err => {
					this.clickFans = true
				})
			},
		},
	}
</script>

<style lang="scss" scoped>
	page, .attent-page{
		background: $page-color-base;
		height: 100%;
		.fans-btn{
			width: 130rpx;
			.cu-btn{
				font-size: 20rpx;
				padding: 0;
				height: 50rpx;
			}
		}
	}
	.list-scroll-content{
		height: 100%;
	}
	.navbar-box{
		height: 90rpx;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0,0,0,.06);
		border-bottom: 1px solid #e1e1e1;
	}
	.navbar{
		display: flex;
		height: 40px;
		padding: 0 5px;
		position: relative;
		z-index: 10;
		.nav-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;
			&.current{
				color: $base-color;
				font-weight: 700;
				font-size: 15px;
				&:after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: 2px;
					transform: translateX(-50%);
					width: 35%;
					height: 0;
					border-bottom: 2px solid $base-color;
				}
			}
		}
	}

	.uni-swiper-item{
		height: auto;
	}
	
	/* load-more */
	.uni-load-more {
		display: flex;
		flex-direction: row;
		height: 80upx;
		align-items: center;
		justify-content: center
	}
	
	.uni-load-more__text {
		font-size: 28upx;
		color: #999
	}
	
	
</style>
